<script setup lang="ts">
import { useClientThemeStore } from '@/store/modules/client-theme';
import { $t } from '@/locales';
import SettingItem from '../components/setting-item.vue';
import LayoutModeCard from '../components/layout-mode-card.vue';

defineOptions({ name: 'LayoutMode' });

const clientThemeStore = useClientThemeStore();

type LayoutModeType = 'vertical' | 'horizontal';

const layoutModes: { key: LayoutModeType; label: string }[] = [
  {
    key: 'vertical',
    label: $t('theme.layoutMode.vertical')
  },
  {
    key: 'horizontal',
    label: $t('theme.layoutMode.horizontal')
  }
];
</script>

<template>
  <ElDivider>{{ $t('theme.layoutMode.title') }}</ElDivider>
  <SettingItem :label="$t('theme.layoutMode.mode')">
    <div class="flex-center gap-16px">
      <LayoutModeCard
        v-for="mode in layoutModes"
        :key="mode.key"
        :mode="mode.key"
        :label="mode.label"
        :checked="clientThemeStore.layout.mode === mode.key"
        @click="clientThemeStore.setLayoutMode(mode.key)"
      />
    </div>
  </SettingItem>
</template>

<style scoped>
.layout-header {
  --uno: h-16px bg-primary rd-4px;
}

.layout-sider {
  --uno: bg-primary-300 rd-4px;
}

.layout-main {
  --uno: flex-1 bg-primary-200 rd-4px;
}

.vertical-wrapper {
  --uno: flex-1 flex-col gap-6px;
}

.horizontal-wrapper {
  --uno: flex-1 flex gap-6px;
}
</style> 